<template>
  <a-card>
    <section class="filter-bar mb-16">
      <span class="label">渠道商名称：</span>
      <a-input class="mr-24 w-300" allow-clear placeholder="请输入渠道商简称或全称" v-model="name" @pressEnter="search" maxLength="50"/>
      <a-button type="primary" @click="search">查询</a-button>
      <a-button class="ml-8" @click="reset">重置</a-button>
      <a-button v-if="$permissionJudge('ChannelAdd')" style="float: right" type="primary" icon="plus"
                @click="$refs.createOrEdit.createOrEditData()">新建
      </a-button>
    </section>
    <a-table
      class="table-con"
      row-key="id"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <template #name="val,data">
        <p class="mb-0 name" style="max-width: 150px;">{{val}}</p>
        <a-tooltip placement="topLeft" :title="data.fullName">
          <p class="mb-0 full-name overflow" style="max-width: 150px;">{{data.fullName}}</p>
        </a-tooltip>
      </template>
      <template #contactPhone="val,data">
        <a-tooltip :title="data.contactName">
          <span class="contact-con overflow">
            {{data.contactName}}
          </span>
        </a-tooltip>
        <a-divider v-if="data.contactPhone" type="vertical"/>
        <a-tooltip :title="data.contactPhone">
          <span class="contact-con overflow">
            {{data.contactPhone}}
          </span>
        </a-tooltip>
        <a-divider v-if="data.contactEmail" type="vertical"/>
        <a-tooltip :title="data.contactEmail">
          <span class="contact-con overflow" style="max-width:120px">
            {{data.contactEmail}}
          </span>
        </a-tooltip>
      </template>
      <template #balanceAmount="val, data">
        <p class="mb-0">余额：{{data.balanceAmount}}
          <a-divider type="vertical"/>
          授信：{{data.creditAmount}}
        </p>
        <p class="mb-0" style="text-align: center;color:#999;">冻结：{{data.frozenAmount}}</p>
      </template>
      <template #isOnline="val,data">
				<section v-if="$permissionJudge('SetChannelStatus')" class="enabled-con">
					<a-switch checked-children="开" un-checked-children="关" :checked="val"  />
					<span class="enabled-mack" ></span>
				</section>
			</template>
			<template #isSmsReminder="val,data">
				<section v-if="$permissionJudge('SetChannelMsgStatus')" class="enabled-con">
					<a-switch checked-children="开" un-checked-children="关" :checked="val"/>
					<span class="enabled-mack" @click="setSmsEnabled(data)"></span>
				</section>
			</template>
			<template #isEnabled="val,data">
				<section v-if="$permissionJudge('SetChannelStatus')" class="enabled-con">
					<a-switch checked-children="开" un-checked-children="关" :checked="val"/>
					<span class="enabled-mack" @click="setEnabled(data)"></span>
				</section>
			</template>
      <template #action="val, data">
        <a @click.stop="$router.push({path:`/channel-management-details/${data.id}`})" href="javascript:">详细信息</a>
      </template>
    </a-table>
    <CreateOrEdit ref="createOrEdit" @upload="search"></CreateOrEdit>
  </a-card>
</template>
<script>
  import {tableMixins} from '@/utils/mixins'
  import { getPageChannelList, createChannel, setChannelStatus, setChannelSmsStatus } from '@/api/operationInfo/channel'
  import {cloneDeep} from 'lodash'
  import CreateOrEdit from './CreateOrEdit'

  export default {
    name: 'ChannelManagement',
    mixins: [tableMixins],
    components: {CreateOrEdit},
    data() {
      return {
        loading: false,
        name: '',
        pageNum: 1,
        rowsNum: 10,
        columns: [
          {dataIndex: 'code', title: '渠道商编码', width: 160, scopedSlots: {customRender: 'code'}, align: 'center'},
					 {dataIndex: 'sort', title: '排序号', scopedSlots: {customRender: 'sort'}, align: 'center'},
          {dataIndex: 'name', title: '渠道商', width: 160, scopedSlots: {customRender: 'name'}, align: 'center'},
          {
            dataIndex: 'contactPhone',
            title: '联系方式',
            scopedSlots: {customRender: 'contactPhone'},
            width: 380,
            align: 'center'
          },
          {dataIndex: 'balanceAmount', title: '账户金额（元）', scopedSlots: {customRender: 'balanceAmount'}, align: 'center'},
          {dataIndex: 'createTime', title: '接入时间', align: 'center'},
          {dataIndex: 'isOnline', title: '是否直连', scopedSlots: {customRender: 'isOnline'}, align: 'center'},
          {dataIndex: 'isSmsReminder', title: '是否短信提醒', scopedSlots: {customRender: 'isSmsReminder'}, align: 'center'},
          {dataIndex: 'isEnabled', title: '是否启用', scopedSlots: {customRender: 'isEnabled'}, align: 'center'},
          {title: '操作', scopedSlots: {customRender: 'action'}, width: 110, align: 'center'}
        ],
        data: []
      }
    },
    created() {
      if (!this.$permissionJudge('SetChannelStatus')) this.columns=this.columns.filter(item=>item.title!=='是否启用')
      this.getData()
    },
    methods: {
      cloneDeep,
      setEnabled(data) {
        this.$confirm({
          title: '请确认是否启用渠道商',
          content: data.isEnabled?`请确定要停用【${data.name}】渠道商吗？`:`请确定要启用【${data.name}】渠道商吗？`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            setChannelStatus({id: data.id, isEnabled: !data.isEnabled}).then(res => {
              this.$message.success('设置成功！')
              this.getData()
            })
          }
        })
      },
      setSmsEnabled(data) {
        this.$confirm({
          title: '请确认是否短信提醒',
          content: data.isSmsReminder ? `请确定要停用【${data.name}】渠道商的短信通知吗？` : `请确定要启用【${data.name}】渠道商的短信通知吗？`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            setChannelSmsStatus({id: data.id, isSmsReminder: !data.isSmsReminder}).then(res => {
              this.$message.success('设置成功！')
              this.getData()
            })
          }
        })
      },
      search() {
        this.pageNum = 1
        this.getData()
      },
      reset() {
        this.name = ''
        this.search()
      },
      getData() {
        this.loading = true
        const {name, pageNum, rowsNum} = this
        getPageChannelList({
          search: name ? name.trim() : undefined, rowsNum, pageNum
        }).then(res => {
          this.loading = false
          const {items, rowCount} = res
          this.data = items
          this.total = rowCount
          this.total = rowCount
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .full-name {
    color: #999;
  }

  .contact-con {
    display: inline-block;
    max-width: 100px;
    vertical-align: top;
  }

  .table-con {
    /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
      padding: 8px;
    }
  }
  .enabled-con{
    position:relative;
    .enabled-mack{
      position: absolute;
      top:0;
      left:0;
      display: inline-block;
      width:100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
  }
</style>
